<template>
<transition name="slideIn">
  <div class="view-box login">
    <XbackMenu></XbackMenu>
    <div class="container flex-c">
      <div class="cont">
        <div class="fs-26 text-center pb20">修改密码</div>
        <el-form :model="formData" status-icon :rules="rules" ref="form" class="mt10">
          <el-form-item prop="oldloginPwd">
            <el-input placeholder="请输入旧密码" type="password" v-model.trim="formData.oldloginPwd"></el-input>
          </el-form-item>
          <el-form-item prop="loginPwd">
            <el-input placeholder="设置6至20位登录密码" type="password" v-model.trim="formData.loginPwd"></el-input>
          </el-form-item>
          <el-form-item prop="repeatPwd">
            <el-input placeholder="请再次输入登录密码" type="password" v-model.trim="formData.repeatPwd"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm" class="w-100">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
import { JSEncrypt } from 'jsencrypt';
const publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCwjDm1HXDw8QH5ZtGMQIl2h/I8E+chOQA8aQ8xCR/+aHnROaN/ZU5Vmd2Zz7g6cAacR9BSm60+iSCYtvEGJKl0WqvbPGJkc8tedjNF1QqgWqkkuE6Udgw2OkEKJCxDg6PrAniR7Cc0io9G8bW4P8JDJjSbbafvMPDDFbVVUWJxxwIDAQAB';
export default {
  name: 'login',
  data () {
    const noChinese = (rule, value, callback) => {
      const reg = /[\u4e00-\u9fa5]/;
      if (reg.test(value)) {
        callback(new Error('不能为中文'));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value && value !== this.formData.loginPwd) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };
    const validateLength = (rule, value, callback) => {
      const reg = /^(?![^a-zA-Z]+$)(?!\D+$)/;
      if (value && (value.length < 6 || value.length > 20)) {
        callback(new Error('密码为6-20位'));
      } else if (!reg.test(value)) {
        callback(new Error('密码必须包含数字和字母'));
      } else {
        callback();
      }
    };
    return {
      formData: {
        oldloginPwd: '',
        loginPwd: '',
        repeatPwd: ''
      },
      rules: {
        oldloginPwd: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { validator: noChinese }
        ],
        loginPwd: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { validator: validateLength },
          { validator: noChinese }
        ],
        repeatPwd: [
          { required: true, message: '请再次输入登录密码', trigger: 'blur' },
          { validator: validatePass },
          { validator: noChinese }

        ],
      }
    };
  },
  mounted () {
  },
  methods: {
    submitForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$loading();
          const encryptor = new JSEncrypt();
          encryptor.setPublicKey(publicKey);
          this.Request.resetPwd({
            params: {
              userId: sessionStorage.userId,
              oldloginPwd: encryptor.encrypt(this.formData.oldloginPwd),
              loginPwd: encryptor.encrypt(this.formData.loginPwd)
            },
            success: (data) => {
              this.$message.success('密码修改成功！');
              this.$loading().close();
            },
            error: () => {
              this.$loading().close();
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>